<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>KISSY Large Menu Demo</title>
<link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
<link href="../assets/menu.css" rel="stylesheet"/>
<link href="../assets/menuitem.css" rel="stylesheet"/>
<link href="../assets/submenu.css" rel="stylesheet"/>
</head>
<body>

<h1 id="describe">large menu</h1>

<div id="menuitem_container" style="width:200px;position:relative;height:150px;">

</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("node,menu",
            function (S, Node, Menu) {
                var start = S.now();
                var menu = new Menu({
                    render:"#menuitem_container"
                });
                for (var i = 0; i < 10; i++) {
                    (function (i) {
                        menu.addChild(new Menu.SubMenu({
                            content:"submenu-" + i,
                            menu:(function () {
                                var sb = {
                                    children:[]
                                };
                                for (var j = 0; j < 10; j++) {
                                    sb.children.push({
                                        content:"submenu-" + i + "-" + j
                                    });
                                }
                                return sb;
                            })()
                        }));
                    })(i);
                }


                menu.render();

                S.log("render ok :" + (S.now() - start));

                menu.on("click", function (ev) {
                    S.log("selected : " + ev.target.get("content"));
                });


            });
</script>
</body>
</html>